<template>
  <div class="wrapper">
    <div class="header">
      <SearchForm showRank />
      <FilterMenu ref="scrollbar" class="menu" @change="handleIndexChange" />
    </div>
    <div class="main">
      <swiper class="mySwiper" :options="swiperOption" ref="mySwiper">
        <swiper-slide class="swiper-slider" v-for="(item, index) in list" :key="index">
          <DemandList :appTypeId="item.id" :index="index" :activeIndex="activeIndex" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
/**
 * @documention 首页
 * @author Gaollard
 * @note 首页主要用于展示任务列表
 */
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import FilterMenu from 'biz/filter-menu'
import DemandList from 'biz/demand-list'
import RecommendBanner from 'biz/recommend-banner'
import SearchForm from 'biz/search-form'
import api from '../../api'

export default {
  components: {
    swiper,
    swiperSlide,
    FilterMenu,
    DemandList,
    SearchForm,
    RecommendBanner
  },
  data() {
    const _this = this
    return {
      list: [],
      activeIndex: 0,
      swiperOption: {
        on: {
          slideChange: function(picker) {
            _this.handleIndexChange(this.activeIndex)
          }
        }
      }
    }
  },
  computed: {
    appTypeId() {
      return this.$route.query.appTypeId
    }
  },
  async mounted() {
    this.getProjectCategory()
  },
  methods: {
    handleIndexChange(index) {
      this.activeIndex = index
      this.$refs.mySwiper.$el.swiper.slideTo(index)
      this.$refs.scrollbar.slideTo(index)
    },
    async getProjectCategory() {
      let res = await api.getProjectCategory()
      if (res && res.success) {
        this.list = res.data.list
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/styles/vars.less';

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  z-index: 5;
  width: 100%;
  top: 0;
  .menu {
    margin-top: -1px;
    background-color: @color-primary;
  }
}

.main {
  flex: 1;
  width: 100%;
  overflow: hidden;
  .mySwiper {
    height: 100%;
  }
  .swiper-slider {
    overflow: auto;
    height: 100%;
  }
}
</style>
